<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">

                        <input type="text" v-model="item">

                        <button class="mt-1 btn btn-primary" @click="items.push({text: item, checked: false})">Add Item</button>

                        <ul class="mt-3">
                            <li v-for="todo in items">{{ todo.text }}</li>
                        </ul>
                    </div>
                </div>

                <div class="card mt-1">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">

                        <ul>
                            <li v-for="item in items" class="d-flex">
                                {{ item.text }}
                                <div class="ms-1" v-if="item.checked">Checked</div>

                                <button @click="item.checked = ! item.checked">Toggle</button>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="card mt-1">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">

                        <div>Price: {{ price }}</div>
                        <input type="text" v-model="price" />
                        <div>Tax: {{ moneyFormat(tax) }}</div>
                        <div>Total: {{ moneyFormat(total) }}</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        },

        data: () => ({
        item: '',
        items: [
            {text: 'item1', checked:true},
            {text: 'item2', checked:true},
            {text: 'item3', checked:true},
            {text: 'item4', checked:false}
        ],

        shown: false,

        price: 100,
        //Tax from 0 to 1
        taxScale: 0.10
        }),

        methods: {
            moneyFormat(price) {
                return '$' + price;
            },
        },
        
        computed: {
            tax() {
                return this.price * this.taxScale;
            },

            total() {
                //We parseInt to get int from input that gives us string
                return parseInt(this.price) + this.tax;
            },
            }
    }
</script>
